<!-- 
    学号:   2017011959
    姓名:     代天放
    班级:       6
    日期:   2019/5/26 
-->
<!DOCTYPE html>
<html lang="en">
    
    <head>
        <title>
            calculate
        </title>
        <meta http-equiv="Content-Type" content="text/html;charaset = utf-8" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            body {
                font:bolder 26px 楷体;
            }
            #result {
                text-align:right;
            }
            table,td {
                border:1px solid #C0C0C0;
            }
            td {
                padding:10px;
            }
            button {
                width:50px;
                height:50px;
               transition: all 0.2s linear;
            }
            button:hover{
                box-shadow: 3px 3px 3px #eee;
            }
        </style>
    </head>
    
    <body>
        <table>
            <tr>
                <td colspan="3" id="result">
                    0
                </td>
                <td>
                    <button type="button" value="C">
                        C
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <button type="button" value="1" >
                        1
                    </button>
                </td>
                <td>
                    <button type="button" value="2">
                        2
                    </button>
                </td>
                <td>
                    <button type="button" value="3">
                        3
                    </button>
                </td>
                <td>
                    <button type="button" value="+">
                        +
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <button type="button" value="4">
                        4
                    </button>
                </td>
                <td>
                    <button type="button" value="5">
                        5
                    </button>
                </td>
                <td>
                    <button type="button" value="6">
                        6
                    </button>
                </td>
                <td>
                    <button type="button" value="-">
                        -
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <button type="button" value="7">
                        7
                    </button>
                </td>
                <td>
                    <button type="button" value="8">
                        8
                    </button>
                </td>
                <td>
                    <button type="button" value="9">
                        9
                    </button>
                </td>
                <td>
                    <button type="button" value="*">
                        *
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <button type="button" value="0">
                        0
                    </button>
                </td>
                <td>
                    <button type="button" value=".">
                        .
                    </button>
                </td>
                <td>
                    <button type="button" value="=">
                        =
                    </button>
                </td>
                <td>
                    <button type="button" value="/">
                        /
                    </button>
                </td>
            </tr>
        </table>
    </body>

</html>
<script>
    (function($){
        //true : 新的运算 false : 处于运算当中
        var sign = true;
        $('button').click(function(){
            if(sign == false && $(this).val()!='=' && $(this).val()!= 'C'){
                $('#result').append($(this).val());
            }
            else if(sign == true && $(this).val()!='=' && $(this).val()!= 'C'){
                sign = false;
                $('#result').html($(this).val());
            }
            else if($(this).val() == '='){
                $('#result').html(eval($('#result').html()));
            }
        })   
        //因为事件覆盖 所以把 清零和等于 的事件放到后面
        $('button[value ^= "="]').click(function(){
            try{
                $('#result').html(eval($('#result').html()));
            }catch(e){
                console.log(e.name+':Mistake rules of operation！Please Restart!');
            }
        })
        //C 归零,重新开始运算
        $('button[value ^= "C"]').click(function(){
            $('#result').html(0);
            sign = true;
        })
    })(jQuery)
</script>